<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">

	<head>
		<meta charset="UTF-8">
		<title>贵州绿建云</title>
		<!--网页图标-->
		<link rel="shortcut icon" href="img/favicon.ico" />
		<!--Html5 support for old IE-->
		<script src="js/html5shiv.min.js" type="text/javascript"></script>
		<!--css3 support for old IE-->
		<script src="js/respond.min.js" type="text/javascript"></script>
		<!--fontAwesome-->
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<!--css by CloudHand-->
		<link rel="stylesheet" href="css/ch233.css">
		<!--vue-->
		<script type="text/javascript" src="js/vue.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<!--vue-->
		<div id="app">
			<!--header-->
			<header>
				<div class="conta">
					<div class="logo">
					<div class="log"><img src="img/header_logoaa.gif" width="100%" /></div>
					</div>
					<div class="haed">
						<ul>
							<li v-for="haed in haeds">
								<a :href="haed.clik">{{haed.name}}</a>
							</li>
						</ul>
					</div>

				</div>
				<div class="carousel-wrap">
					<!--// 轮播图列表-->
					<transition-group tag="ul" class='slide-ul' name="list">
						<li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" class="list-item">
							<!--<a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow">-->
							<img :src="list.image" :alt="list.desc">
							<!--</a>-->
						</li>
					</transition-group>
					<!--// 轮播图位置指示-->
					<div class="carousel-items" @mouseenter="stop" @mouseleave="go">
						<span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @click="change(index)"></span>
					</div>
				</div>
				<div class="header-notice-wrapper">
					<ul class="header-notice">
						<li v-for="text in texts">
							<a href="#"><i class="fa fa-volume-up"></i>{{text.name}}</a>
						</li>
						<li class="last">
							<a href="#"><i class="fa fa-plus"></i>{{mes}}</a>
						</li>
					</ul>
				</div>
			</header>
			<div class="section-tt container1180">
				<h1>{{yiy}}</h1>
				<p>{{yiy1}}</p>
			</div>
			<section class="main-column container1180" v-for="h1 in h2s">
				<div class="main-col-item">
					<img src="img/mian_col_icon_0.gif">
					<h2>{{h1.name}}</h2>
					<p>{{h1.name1}}</p>
				</div>
				<div class="main-col-item">
					<img src="img/mian_col_icon_1.gif">
					<h2>{{h1.name2}}</h2>
					<p>{{h1.name3}}</p>
				</div>
				<div class="main-col-item">
					<img src="img/mian_col_icon_2.gif">
					<h2>{{h1.name4}}</h2>
					<p>{{h1.name5}}</p>
				</div>
				<div class="main-col-item">
					<img src="img/mian_col_icon_3.gif">
					<h2>{{h1.name6}}</h2>
					<p>{{h1.name7}}</p>
				</div>
				<div class="main-col-item">
					<img src="img/mian_col_icon_4.gif">
					<h2>{{h1.name8}}</h2>
					<p>{{h1.name9}}</p>
				</div>
			</section>

			<section class="function-wrapper">
				<div class="section-tt section-tt-fn container1180">
					<h1>{{mes1}}</h1>
					<p>{{mes2}}</p>
				</div>
				<div class="function-bar container1180" v-for="function1 in functions1">
					<div class="fn-item">
						<img src="img/fn_0.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/fn_0_icon.png">
							<h3>{{function1.name}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/fn_1.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/fn_1_icon.png">
							<h3>{{function1.name1}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/fn_2.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/fn_2_icon.png">
							<h3>{{function1.name2}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/fn_3.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/fn_3_icon.png">
							<h3>{{function1.name3}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/fn_4.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/fn_4_icon.png">
							<h3>{{function1.name4}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/fn_5.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/fn_5_icon.png">
							<h3>{{function1.name5}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/fn_6.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/fn_6_icon.png">
							<h3>{{function1.name6}}</h3>
							<p></p>
						</div>
					</div>
				</div>
			</section>

			<div class="section-tt container1180">
				<h1>{{mes3}}</h1>
				<p></p>
			</div>
			<section class="products-wrapper container1180">
				<ul class="products-li listTab0 current">
					<li v-for="product in products">
						<a href="#">
							<h4>{{product.name}}</h4>
							<p>{{product.name1}}</p>
						</a>
					</li>
					<li class="last"></li>
				</ul>
				<ul class="products-li listTab1">
					<li v-for="product1 in products1">
						<a href="#">
							<h4>{{product1.name}}</h4>
							<p>{{product1.name1}}</p>
						</a>
					</li>
					<li class="last"></li>
				</ul>
				<ul class="listTabDo">
					<li class="current">1</li>
					<li>2</li>
				</ul>
				<div class="listTabPv"><i class="fa fa-angle-left"></i></div>
				<div class="listTabNt"><i class="fa fa-angle-right"></i></div>
			</section>

			<section class="partner-wrapper">
				<div class="section-tt container1180">
					<h1>{{mes4}}</h1>
					<p>{{mes5}}</p>
				</div>
				<ul class="partner-li container1180">
					<li v-for="img in imgs" :key="img">
						<a href="#"><img :src="img"></a>
					</li>
					<li class="last"></li>
				</ul>
			</section>

			<footer class="foote">
				 <p>版权所有：贵州绿建云&nbsp;&nbsp;&nbsp;&nbsp;Copyright©2017 All rights reserved</p>
			</footer>
		</div>
		<!--vue结束-->
		<!--Elements UED ch233.js-->
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/ch233.min.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					//轮播图图片路径
					slideList: [{
							"clickUrl": "#",
							"desc": "nhwc",
							"image": "img/slide/cover_0.jpg"
						},
						{
							"clickUrl": "#",
							"desc": "hxrj",
							"image": "img/slide/cover_1.jpg"
						},
						{
							"clickUrl": "#",
							"desc": "rsdh",
							"image": "img/slide/cover_2.jpg"
						},
						{
							"clickUrl": "#",
							"desc": "rsdh1",
							"image": "img/slide/cover_3.jpg"
						}
					],
					//头部公告信息
					texts: [{
							name: '[2017-06-30]“保护母亲河，河长大巡河”...'
						},
						{
							name: '[2017-06-20]人民网刊登《中外嘉宾共探特色小城镇之美》'
						},
						{
							name: '[2017-06-12]多彩贵州网刊登《贵州：2017年底省级示范镇...'
						}
					],
					//网页内容
					mes: '更多信息',
					yiy: '易用、安全的绿色建筑大数据服务',
					yiy1: '计算、存储、网络、安全、智能，大数据科技助您一臂之力',
					mes1: '绿建栏目',
					mes2: '建立绿色建筑科技支撑体系，解决制约绿色建筑健康快速发展的难题',
					mes3: '绿色产品',
					mes4: '合作伙伴',
					mes5: '加入绿建云平台合作伙伴计划，开创新业务，获取技术、资源，实现更快速成长',
					show: true,
					currentIndex: 0,
					h2s: [{
						name: '绿建评星 ',
						name1: '国家标准，规范流程，方便快捷',
						name2: 'EPC采购',
						name3: '国内品类最全的建筑和材料数据库',
						name4: '会员服务',
						name5: '绿建联创平台会员定制服务',
						name6: '企业服务',
						name7: '注册企业用户入口',
						name8: '政府服务',
						name9: '政府管理部门入口'
					}],
					//导航
					haeds:[
					{name:'最新活动'},
					{name:'行业应用'},
					{name:'大数据'},
					{name:'装配式建筑'},
					{name:'项目信息'},
					{name:'绿建会员'},
					{name:'绿建社区',clik:'#'},
					{name:'支持'},
					{name:'注册'},
					{name:'登录',clik:'#'}
					
					],
                //绿建项目
					functions1: [{
						name: '行业资讯',
						name1: '装配式建筑',
						name2: '绿建大数据',
						name3: '绿建评星',
						name4: '绿建热点',
						name5: '绿建推荐',
						name6: '项目案例'
					}],
					products: [{
							name: '墙体材料',
							name1: '新型建筑墙体材料'
						},
						{
							name: '保温隔热',
							name1: '新型环保保温隔热材料'
						},
						{
							name: '防水密封',
							name1: '新型防水密封材料'
						},
						{
							name: '陶瓷材料',
							name1: '新型陶瓷材料'
						}
					],
					products1: [{
							name: '结构建材',
							name1: '新型结构建材'
						},
						{
							name: '装饰装修材料',
							name1: '新型装饰装修材料'
						},
						{
							name: '工业废渣利用',
							name1: '工业废渣综合利用/污水源热泵技术'
						},
						{
							name: '再生能源利用',
							name1: '太阳能综合利用'
						}

					],
					//尾部商标
					imgs: [
						'img/pa_icon_0.gif',
						'img/pa_icon_1.gif',
						'img/pa_icon_2.gif',
						'img/pa_icon_3.gif',
						'img/pa_icon_4.gif'
					]
				},
				methods: {
					//过渡效果
					randomIndex: function() {
						return Math.floor(Math.random() * this.slideList.length)
					},
					add: function() {
						this.slideList.splice(this.randomIndex(), 0, this.nextNum++)
					},
					remove: function() {
						this.slideList.splice(this.randomIndex(), 1)
					},
					//鼠标离开事件
					go() {
						this.timer = function() {
							setInterval(this.autoPlay(), 4500)
						}
					},
					//鼠标移上
					stop() {
						clearInterval(this.timer)
						this.timer = null
					},
					//点击圆点
					change(index) {
						this.currentIndex = index
					},

					autoPlay() {
						this.currentIndex++
							if(this.currentIndex > this.slideList.length - 1) {
								this.currentIndex = 0
							}
					}
				},
				//图片轮播
				created() {
					this.$nextTick(
						this.timer = function() {
							setInterval(this.autoPlay(), 4500)
						})

				}
			})
		</script>
	</body>

</html>